<!-- 实时用电 -->
<template>
	<LineEchart
		class="zs-layout-grow zs-overflow-auto"
		echartId="electricity"
		:emptyImage="placeholderPic"
		:emptyDes="' '"
		:echartData="cardData.echartData"
		:isInCard="true"
		:showSymbol="false"
		:smooth="true"
		:isShowAreaStyle="true"
		:ShowAreaStyleLine="[0, 1]"
		:areaStyleColor="[
			{ start: 'rgba(255,71,55,0.48)', end: 'rgba(0,0,0, 0)' },
			{ start: 'rgba(19,52,255,0.57)', end: 'rgba(0,0,0,0.00)' },
		]"
		:tooltipBg="'rgba(2, 11, 69, 0.75)'"
		:tooltipBorderColor="'rgba(2, 11, 69, 0.75)'"
		:tooltipTxtColor="'#ffffff'"
		:legendLeft="'center'"
		:legendBottom="'20'"
		:legendTxtColor="'#ffffff'"
		:xAxisLineColor="'#3051a4'"
		:xAxisLabelColor="'#8be1ff'"
		xAxisLabelRotate="0"
		:yAxisLabelColor="'rgba(90, 101, 116, 0.5)'"
		:ySplitLineColor="'#042b6f'"
		:tooltipFormatter="tooltipFormatter"
	></LineEchart>
</template>

<script setup>
	import LineEchart from '@/components/EchartComponent/LineEchart';
	import { reactive, watchEffect } from 'vue';
	import Energy from '@/api/Energy';
	const placeholderPic = require('@/assets/image/energyMonitor/placeholder.png');

	const props = defineProps({
		projectCode: { type: String, default: '' },
		showTime: { type: Number, default: null },
	});

	let cardData = reactive({
		echartData: [],
	});

	// 获取图表数据
	const queryEchartData = async () => {
		let res = await Energy.electroRealTime({
			businessType: 1,
			meterType: 1,
			projectCode: props.projectCode,
			queryTime: props.showTime,
		});
		cardData.echartData = res.data.data;
		// cardData.echartData = {
		// 	xData: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
		// 	yData: [
		// 		{
		// 			name: '昨日',
		// 			type: 'line',
		// 			data: [1000, 1200, 1500, 1800, 2100, 2500, 3000, 3500, 4000, 3700, 3300, 2900, 2600, 2400, 2700, 3100, 3600, 4000, 3700, 3300, 2900, 2500, 2100, 1800],
		// 		},
		// 		{
		// 			name: '今日',
		// 			type: 'line',
		// 			data: [200, 100, 100, 160, 200, 2400, 3000, 3100, 3200, 3100, 2700, 2300, 2500, 2000, 2600, 3000, 3500, 3500, 3200, 3000, 2800, 2100, 2000, 1500],
		// 		},
		// 	],
		// };
	};

	const tooltipFormatter = params => {
		let time = '';
		let hour = Number(params[0].axisValue.split(':')[0]);
		let preHour = hour - 1;
		time = hour == 1 ? '00:00 - 01:00' : formatTime(preHour) + ' - ' + formatTime(hour);
		params[0].value = params[0].value ? params[0].value + '度' : '-';
		params[1].value = params[1].value ? params[1].value + '度' : '-';
		let result = `${time}
		<br/>
		<span class="cycle-point color-red"></span><span style="isplay: inline-block;padding-left:5px;padding-right:20px;">${params[0].seriesName}</span>${params[0].value}
		<br/>
		<span class="cycle-point color-blue"></span><span style="isplay: inline-block;padding-left:5px;padding-right:20px;">${params[1].seriesName}</span>${params[1].value}`;
		return result;
	};

	const formatTime = num => {
		return num > 9 ? `${num}:00` : `0${num}:00`;
	};

	watchEffect(() => {
		queryEchartData(props.projectCode);
	});
</script>

<style scoped lang="scss">
	:deep(.cycle-point) {
		display: inline-block;
		width: 10px;
		height: 10px;
		border-radius: 50%;
	}
	:deep(.color-red) {
		background-color: #ff5353;
	}
	:deep(.color-blue) {
		background-color: #477afd;
	}
</style>
